<template>
  <div class="audio-container">
    <div class="player">
      <audio ref="player" :src="url" controls autoplay preload="true" @canplay="start" @ended="end"></audio>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  name: "index",
  data() {
    return {
      // musicUrl: "",
    };
  },
  computed:{
    ...mapGetters(['id','isPlay','url']),
  },
  watch:{
    isPlay:function(){
      this.togglePlay();
    }
  },
  methods:{
    // 获取连接后准备播放
    start(){
      // 开始播放
      let player=this.$refs.player
      // player.play()
      this.$store.commit('setIsPlay',true)
    },
    // 播放结束
    end(){
       this.$store.commit('setIsPlay',false)
    },
    togglePlay(){
      // let player=document.querySelector('#player')
      if(this.isPlay){
        this.$refs.player.play()
      }else{
        this.$refs.player.pause()
      }
    },
  }
};
</script>

<style scoped>
</style>